<template>
  <div class="app-container">
    <div class="Container">
      <!-- 门店信息 -->
      <div class="wrapper">
        <div class="topTitle">
          <span><strong>门店信息</strong></span>
        </div>
        <div class="content">
          <div class="flex">
            <span class="item1">名称</span>
            <span class="item">{{ this.storeData.storeName }}</span>
          </div>
          <div class="flex">
            <span class="item1">面积</span>
            <span class="item">{{ this.storeData.area }} m²</span>
          </div>
          <div class="flex">
            <span class="item1">地址</span>
            <span class="item">{{ this.storeData.address }}</span>
          </div>
        </div>
      </div>

      <!-- 店长信息 -->
      <div class="wrapper">
        <div class="topTitle">
          <span><strong>店长信息</strong></span>
        </div>
        <!-- 店长信息展示 -->
        <div v-show="managerDateStatus=='展示'" class="content">
          <!-- 隐藏的修改按钮 -->
          <a id="editManager" class="el-icon-edit-outline edit-btu" @click="editManagerData()">修改</a>
          <div class="flex">
            <span class="item1">姓名</span>
            <span class="item">{{ this.storeData.manager.name }}</span>
          </div>
          <div class="flex">
            <span class="item1">性别</span>
            <span class="item">{{ this.storeData.manager.sex }}</span>
          </div>
          <div class="flex">
            <span class="item1">手机</span>
            <span class="item">{{ this.storeData.manager.phone }}</span>
          </div>
          <div class="flex">
            <span class="item1">邮箱</span>
            <span class="item">{{ this.storeData.manager.email }}</span>
          </div>
        </div>
        <!-- 店长信息修改 -->
        <div v-show="managerDateStatus=='修改'" class="content-edit">
          <el-form
            ref="dataForm"
            :rules="rules"
            :model="managerTemp"
            :hide-required-asterisk="true"
            label-position="left"
            label-width="100px"
          >
            <el-form-item label="姓名" prop="name">
              <el-input v-model="managerTemp.name" class="form-input" />
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio v-model="managerTemp.sex" label="男">男</el-radio>
              <el-radio v-model="managerTemp.sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="手机" prop="phone">
              <el-input v-model="managerTemp.phone" class="form-input" />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="managerTemp.email" disabled class="form-input" />
            </el-form-item>
          </el-form>
          <el-button
            style="position: relative; left: 120px; margin-left: 10px"
            type="primary"
            @click="updateManager()"
          >确定</el-button>
          <el-button
            style="position: relative; left: 120px; margin-left: 10px"
            @click="managerDateStatus='展示'"
          >取消</el-button>
        </div>
      </div>

      <!-- 门店规则 -->
      <div class="wrapper">
        <div class="topTitle">
          <span>
            <strong>门店规则</strong>
          </span>
        </div>
        <div class="content-rule">
          <el-table :data="storeRules" :row-class-name="tableRowClassName" style="width: 100%">
            <el-table-column type="index" label="编号" width="170" />
            <el-table-column prop="storeExplain" label="描述">
              <template slot-scope="{row}">
                <div v-if="row.index === tabClickIndex">
                  <!-- 1 关店收尾人数 -->
                  <span v-if="row.ruleName=='closeStoreEmps'">
                    <span>门店面积 /&nbsp;</span>
                    <el-input-number
                      v-model="ruleValue.value1"
                      :min="1"
                      :step="1"
                      step-strictly
                      size="mini"
                      controls-position="right"
                      style="width:100px"
                    />
                    <span>&nbsp;+&nbsp;</span>
                    <el-input-number
                      v-model="ruleValue.value2"
                      :min="1"
                      :step="1"
                      step-strictly
                      size="mini"
                      controls-position="right"
                      style="width:100px"
                    />
                    <span>&nbsp;= 收尾工作人数</span>
                  </span>
                  <!-- 2 关店后收尾工作时间 -->
                  <span v-if="row.ruleName=='closeWorkTime'">
                    <span>关店后&nbsp;</span>
                    <el-input-number
                      v-model="ruleValue.value1"
                      :min="0.5"
                      :max="2"
                      :step="0.5"
                      step-strictly
                      size="mini"
                      controls-position="right"
                      style="width:100px"
                    />
                    <span>&nbsp;小时内做收尾工作</span>
                  </span>
                  <!-- 3 无客流时值班人数 -->
                  <span v-if="row.ruleName=='minPeopleRequest'">
                    <span>没有客流时，至少需要&nbsp;</span>
                    <el-input-number
                      v-model="ruleValue.value1"
                      :min="1"
                      :step="1"
                      step-strictly
                      size="mini"
                      controls-position="right"
                      style="width:100px"
                    />
                    <span>&nbsp;个员工值班</span>
                  </span>
                  <!-- 4 预测客流量 -->
                  <span v-if="row.ruleName=='needPeopleParam'">
                    <span>预测客流量 /&nbsp;</span>
                    <el-input-number
                      v-model="ruleValue.value1"
                      :min="1"
                      :step="0.1"
                      step-strictly
                      size="mini"
                      controls-position="right"
                      style="width:100px"
                    />
                    <span>&nbsp;= 需要店员数量</span>
                  </span>
                  <!-- 5 开店前准备工作人数 -->
                  <span v-if="row.ruleName=='preWorkN'">
                    <span>门店面积 /&nbsp;</span>
                    <el-input-number
                      v-model="ruleValue.value1"
                      :min="1"
                      :step="1"
                      step-strictly
                      size="mini"
                      controls-position="right"
                      style="width:100px"
                    />
                    <span>&nbsp;= 开店前准备工作需要人数</span>
                  </span>
                  <!-- 6 开店准备工作时长 -->
                  <span v-if="row.ruleName=='preWorkTime'">
                    <span>开店前&nbsp;</span>
                    <el-input-number
                      v-model="ruleValue.value1"
                      :min="0.5"
                      :max="2"
                      :step="0.5"
                      step-strictly
                      size="mini"
                      controls-position="right"
                      style="width:100px"
                    />
                    <span>&nbsp;小时内做准备工作</span>
                  </span>
                  <el-button
                    style="position: relative; left: 50px; margin-left: 10px"
                    type="primary"
                    size="mini"
                    @click="editRule()"
                  >确定</el-button>
                  <el-button
                    style="position: relative; left: 50px; margin-left: 10px"
                    size="mini"
                    @click="tabClickIndex=null"
                  >取消</el-button>
                </div>
                <div v-else>
                  <span>{{ row.storeExplain }}</span>
                  <a id="rule-btn" class="el-icon-edit-outline edit-btu" @click="selectRule(row)">修改</a>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {
  SearchStoreData,
  SearchStoreRule,
  updateManager,
  updateStoreRule
} from '@/api/storeManage'
export default {
  name: 'StoreInfoManagement',
  data() {
    return {
      // 门店信息
      storeData: {
        storeName: '',
        area: undefined,
        address: '',
        manager: {
          name: '',
          sex: '',
          phone: '',
          email: ''
        }
      },
      storeRules: [],

      // 店长信息页面状态
      managerDateStatus: '展示',

      managerTemp: {
        name: '',
        sex: '',
        phone: '',
        email: ''
      },

      // 表单校验规则
      rules: {
        name: [{ required: true, message: '请输入店长名称', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '手机号格式错误',
            trigger: 'blur'
          }]
      },

      // 修改规则
      tabClickIndex: null, // 点击的单元格
      ruleTemp: null,
      ruleValue: {
        value1: null,
        value2: null
      }

    }
  },
  created() {
    this.getStoreData()
    this.getStoreRule()
  },
  methods: {
    // 获取门店信息
    getStoreData() {
      SearchStoreData().then((res) => {
        if (res.returnValue === 1) {
          this.storeData = res.data
        } else {
          this.storeData = {}
          this.$notify({
            title: 'Error',
            message: res.msg,
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    // 获取门店规则
    getStoreRule() {
      SearchStoreRule().then((res) => {
        if (res.returnValue === 1) {
          this.storeRules = res.data
          this.editRuleExplain()
        } else {
          this.storeRules = []
          this.$notify({
            title: 'Error',
            message: res.msg,
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    // 编辑店铺规则描述
    editRuleExplain() {
      const data = this.storeRules
      for (var rule of data) {
        if (rule.ruleName === 'preWorkTime') {
          var value = rule.storeRuleValue
          var explain = '开店前' + value + '小时内做准备工作'
          rule.storeExplain = explain
        } else if (rule.ruleName === 'needPeopleParam') {
          var value = rule.storeRuleValue
          var explain = '预测客流量 / ' + value + ' = 需要店员数量'
          rule.storeExplain = explain
        } else if (rule.ruleName === 'minPeopleRequest') {
          var value = rule.storeRuleValue
          var explain = '没有客流时，至少需要' + value + '个员工值班'
          rule.storeExplain = explain
        } else if (rule.ruleName === 'closeWorkTime') {
          var value = rule.storeRuleValue
          var explain = '关店后' + value + '小时内做收尾工作'
          rule.storeExplain = explain
        } else if (rule.ruleName === 'closeStoreEmps') {
          var value = rule.storeRuleValue.split(',')
          var explain = '门店面积 / ' + value[0] + ' + ' + value[1] + ' = 收尾工作人数'
          rule.storeExplain = explain
        } else if (rule.ruleName === 'preWorkN') {
          var value = rule.storeRuleValue
          var explain = '门店面积 / ' + value + ' = 开店前准备工作需要人数'
          rule.storeExplain = explain
        }
      }
    },
    // 点击修改店长信息按钮
    editManagerData() {
      this.managerTemp = Object.assign({}, this.storeData.manager)
      this.managerDateStatus = '修改'
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 修改店长信息
    updateManager() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const returnTemp = {}
          returnTemp.name = this.managerTemp.name
          returnTemp.sex = this.managerTemp.sex
          returnTemp.phone = this.managerTemp.phone
          returnTemp.email = this.managerTemp.email
          updateManager(returnTemp).then((res) => {
            if (res.returnValue === 1) {
              this.managerDateStatus = '展示'
              this.getStoreData()
              this.$notify({
                title: 'Success',
                message: res.data,
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify({
                title: 'Error',
                message: res.msg,
                type: 'error',
                duration: 2000
              })
            }
          })
        }
      })
    },
    tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
    },
    // 获取选择的规则
    selectRule(row) {
      // 得到选择规则的index
      this.tabClickIndex = row.index
      this.ruleTemp = row
      // 清空ruleValue
      this.ruleValue.value1 = null
      this.ruleValue.value2 = null
      if (row.ruleName === 'closeStoreEmps') {
        var value = row.storeRuleValue.split(',')
        this.ruleValue.value1 = value[0]
        this.ruleValue.value2 = value[1]
      } else {
        this.ruleValue.value1 = row.storeRuleValue
      }
    },
    // 修改一条规则
    editRule() {
      if (this.ruleTemp.ruleName === 'closeStoreEmps') {
        var str = this.ruleValue.value1 + ',' + this.ruleValue.value2
        this.ruleTemp.storeRuleValue = str
      } else {
        this.ruleTemp.storeRuleValue = this.ruleValue.value1
      }
      const returnTemp = {}
      returnTemp.id = this.ruleTemp.id
      returnTemp.storeId = this.ruleTemp.storeId
      returnTemp.ruleName = this.ruleTemp.ruleName
      returnTemp.storeRuleValue = this.ruleTemp.storeRuleValue
      updateStoreRule(returnTemp).then((res) => {
        if (res.returnValue === 1) {
          this.tabClickIndex = null
          this.getStoreRule()
          this.$notify({
            title: 'Success',
            message: res.data,
            type: 'success',
            duration: 2000
          })
        } else {
          this.$notify({
            title: 'Error',
            message: res.msg,
            type: 'error',
            duration: 2000
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .app-container {
    background-color: rgba(245, 246, 247);
  }

  .Container {
    width: 70%;
    margin: 0 auto;
    padding: 10px;
  }

  .wrapper {
    display: flex;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(202, 202, 208);
    border-radius: 5px;
    flex-direction: column;
    justify-content: flex-start;
    margin: 10px;
    padding: 20px;
  }

  .topTitle {
    font-size: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 20px;
    margin-bottom: 10px;
  }

  .topTitle span {
    display: flex;
    justify-content: space-between;
  }

  .content {
    position: relative;
    width: 100%;
    padding: 20px;
  }

  .content-edit {
    width: 100%;
    padding: 20px;
    background-color: rgba(245, 246, 247);
  }

  .content:hover {
    background-color: rgba(245, 246, 247);
  }

  .content:hover #editManager {
    display: block;
  }

  .edit-btu {
    position: absolute;
    right: 10%;
    display: none;
  }

  .el-table__body tr:hover #rule-btn {
    display: inline;
  }

  .edit-btu:hover {
    color: rgb(77, 129, 207);
  }

  .flex {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .item1 {
    width: 20%;
    margin-right: 70px;
  }

  .form-input {
    width: 300px;
  }
</style>
